<template>
  <div class="app-container">
    <!-- 表格-条件筛区域  -->
    <div class="filter-container">
      <el-input v-model="searchParam.SEARCH_LIKE_comment_content" placeholder="请输入关键字" style="width: 200px;"
                class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <!--      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"-->
      <!--                 @click="handleCreate">新增-->
      <!--      </el-button>-->
    </div>

    <!-- 表格-内容区域 -->
    <el-table :key="tableKey" v-loading="listLoading" :data="tableList" border fit highlight-current-row
              style="width: 100%;">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align?column.align:'center'"
        :min-width="column.minWidth"
        :sortable="column.sortable"
        :fixed="column.fixed"
        :type="column.type"
        :formatter="column.formatter"
      >
        <template slot-scope="scope">
          <img v-if="column.imgFlag==true" :src="scope.row[column.prop]" width="60" height="60" class="img">
          <!-- 行内显示tag标签 -->
          <span v-else-if="column.tagFlag==true">
            <span v-for="item in column.tagFormatter" :key="item.value">
              <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{ item.text }}</el-tag>
            </span>
          </span>

          <!-- 行内显示开关按钮 -->
          <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                     :inactive-value="0" @change="changeSwitch(scope.row[column.prop],scope.row.id)"/>
          <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评论图片" align="center" width="140" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表格-页脚区域 -->
    <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum"
                :limit.sync="pageRequest.pageSize" @pagination="getList"/>

    <el-dialog v-if="dialogEditVisible" :title="operation?' ':' '" width="45%" top="20vh" :visible.sync="dialogEditVisible"
               :close-on-click-modal="false"
               :modal="false"
               :modal-append-to-body="false">
      <el-form :model="dataForm" label-width="140px" :rules="dataFormRules" ref="dataForm" style="width: 80%">
        <el-form-item label="评论图片" prop="commentPics">
          <UploadMore
            v-model="dataForm.commentPics"
            :file-list="dataForm.commentPics"
            :is-edit="!dataForm.id"
          />
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--新增编辑界面-->
    <el-dialog :title="operation?'新增':'编辑'" width="45%" top="5vh" :visible.sync="dialogFormVisible"
               :close-on-click-modal="false">
      <div style="height:550px;overflow-y: scroll;">
        <el-form ref="dataForm" :model="dataForm" label-width="140px" :rules="dataFormRules" style="width: 80%">

          <el-form-item label="头像" prop="memberPic">
            <Upload v-model="dataForm.memberPic"/>
          </el-form-item>
          <!--          <el-form-item label="会员id" prop="memberId">-->
          <!--            <el-input v-model="dataForm.memberId" auto-complete="off"/>-->
          <!--          </el-form-item>-->
          <el-form-item label="评价内容" prop="commentContent">
            <el-input v-model="dataForm.commentContent" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="评价图片" prop="commentPics">
            <Upload v-model="dataForm.commentPics"/>
          </el-form-item>
          <el-form-item label="是否展示 " prop="showFlag">
            <el-switch v-model="dataForm.showFlag" :active-value="1" :inactive-value="0"/>
          </el-form-item>
          <el-form-item label="是否匿名 " prop="anonymousFlag">
            <el-switch v-model="dataForm.anonymousFlag" :active-value="1" :inactive-value="0"/>
          </el-form-item>
          <el-form-item label="评论比重( 星级 )" prop="scoreWeight">
            <el-input v-model="dataForm.scoreWeight" auto-complete="off"/>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click.native="closeDialog()">取消</el-button>
        <el-button size="mini" :loading="editLoading" type="primary" @click.native="saveFormData()">提交
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
    import baseData from '@/mixin/base-data'
    import {
        getOrderCommentList,
        saveOrderCommentInfo,
        editOrderCommentInfo,
        deleteOrderCommentInfo
    } from '@/api/modules/goodsOrder'
    import Upload from '@/components/Upload'
    import UploadMore from '@/components/UploadMore'
    export default {
        name: 'ProductBrand',
        components: {Upload,UploadMore},
        props: {
            // 用户ID
            rowId: {
                type: String,
                required: true
            }
        },
        directives: {},
        filters: {},
        mixins: [baseData],
        data() {
            return {
                tableKey: 0,
                tableList: [], // 表格数据源
                tableTotal: 0, // 表格总条数数据
                listLoading: true,
                pageRequest: {pageNum: 1, pageSize: 10},
                searchParam: {SEARCH_LIKE_goods_id: ''},
                dialogFormVisible: false, // 默认不显示弹出框
                dialogEditVisible:false,
                operation: true, // true:新增, false:编辑
                editLoading: false, // 保存表单时loading框
                columns: [
                    {prop: 'goodsName', label: '商品名称', sortable: false,width: '180px'},
                    {prop: 'commentContent', label: '评价内容', sortable: false,width: '220px'},
                    {prop: 'memberName', label: '用户名', sortable: false, width: '110px'},
                    {prop: 'memberPic', label: '头像', sortable: false, imgFlag: true, width: '120px'},
                    {
                        prop: 'showFlag', label: '是否展示', sortable: false, tagFlag: true, width: '80px',
                        tagFormatter: [
                            {text: '不展示', value: 0, type: 'success'},
                            {text: '展示', value: 1, type: 'warn'}
                        ]
                    },
                    {prop: 'createTime', label: '创建时间', sortable: false, width: '140px'}
                ],
                fileList: [],
                // 新增编辑界面数据
                dataForm: {
                    id: '',
                    orderId: '',
                    memberId: '',
                    commentContent: '',
                    commentPics: '',
                    memberPic: '',
                    goodsName: '',
                    showFlag: '',
                    anonymousFlag: '',
                    scoreWeight: '',
                    createUser: '',
                    createTime: ''
                },
                // 表单检验规则
                dataFormRules: {
                    orderId: [{required: true, message: '请输入订单id', trigger: 'blur'}],
                    memberId: [{required: true, message: '请输入会员id', trigger: 'blur'}],
                    commentContent: [{required: true, message: '请输入评价内容', trigger: 'blur'}],
                    commentPics: [{required: true, message: '请输入评价图片', trigger: 'blur'}],
                    goodsName: [{required: true, message: '请输入评价图片', trigger: 'blur'}],
                    memberPic: [{required: true, message: '请输入头像图片', trigger: 'blur'}],
                    showFlag: [{required: true, message: '请输入是否展示 0 不展示 1展示', trigger: 'blur'}],
                    anonymousFlag: [{required: true, message: '请输入是否匿名 0匿名 1不匿名 ', trigger: 'blur'}],
                    scoreWeight: [{required: true, message: '请输入评论比重( 星级 )', trigger: 'blur'}]
                }
            }
        },
        created() {
            this.getList()
        },
        methods: {
            async getList() {
                this.listLoading = true
                // 【API请求】----获取用户列表数据

                this.searchParam.SEARCH_LIKE_goods_id = this.rowId
                this.pageRequest.searchParam = this.searchParam
                const res = await getOrderCommentList(this.pageRequest)
                console.log(res)
                try {
                    if (res.code === 0) {
                        const {content, total} = res.data
                        this.tableList = content
                        this.tableTotal = total
                    }
                    this.listLoading = false
                } catch (e) {
                    this.listLoading = false
                    throw e
                }
            },
            // 获取表格数据
            // 表格数据筛选
            handleFilter() {
                this.pageRequest.searchParam = this.searchParam
                this.getList()
            },
            // 【按钮点击】--- 弹出新增表单
            handleCreate() {
                this.operation = true
                this.initDataForm()

                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false
                })
            },
            // 【按钮点击】--- 弹出编辑表单
            handleUpdate(row) {
                this.operation = false
                this.dataForm = Object.assign({}, row)
                // 显示编辑菜单
                this.dialogEditVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false
                })
            },
            // 保存表单数据
            saveFormData() {
                let res
                this.$refs['dataForm'].validate(async (valid) => {
                    if (!valid) {
                        return false
                    }
                    this.editLoading = true
                    if (this.dataForm.id === null || this.dataForm.id === '') {
                        res = await saveOrderCommentInfo(this.dataForm)
                    } else {
                        res = await editOrderCommentInfo(this.dataForm)
                    }
                    try {
                        if (res.code === 0) {
                            this.dialogFormVisible = false// 关闭表单页面
                            this.initDataForm()// 重置表单数据
                            this.getList()// 重新获取表格数据
                            this.$notify({title: '成功', message: '保存成功', type: 'success', duration: 2000})
                        }
                        this.editLoading = false// 关闭loading框
                    } catch (e) {
                        throw e
                    }
                })
            },
            // 【按钮点击】---删除行
            handleDelete(row) {
                this.$confirm('确认删除该记录吗？', '提示', {}).then(async () => {
                    // 【API请求】---- 删除数据
                    const {id} = row
                    const res = await deleteOrderCommentInfo({ids: id})
                    try {
                        if (res.code === 0) {
                            this.getList()
                            this.$message({message: '操作成功', type: 'success'})
                        }
                    } catch (e) {
                        throw e
                    }
                })
            },
            // 初始化表单数据，重新渲染
            initDataForm() {
                Object.assign(this.$data.dataForm, this.$options.data().dataForm)
            },
            // 关闭表单弹出框
            closeDialog() {
                this.$refs['dataForm'].resetFields()
                this.dialogFormVisible = false
                this.dialogEditVisible = false
            }
        }
    }
</script>
